    <style>
      :host {
        --cr-toggle-checked-bar-color: var(--google-blue-600);
        --cr-toggle-checked-button-color: var(--google-blue-600);
        --cr-toggle-checked-ripple-color:
            rgba(var(--google-blue-600-rgb), .2);
        --cr-toggle-ripple-diameter: 40px;
        --cr-toggle-unchecked-bar-color: var(--google-grey-400);
        --cr-toggle-unchecked-button-color: white;
        --cr-toggle-unchecked-ripple-color:
            rgba(var(--google-grey-600-rgb), .15);
        -webkit-tap-highlight-color: transparent;
        cursor: pointer;
        display: block;
        min-width: 34px;
        outline: none;
        position: relative;
        width: 34px;

      }

      :host-context([chrome-refresh-2023]):host {
        --cr-toggle-checked-bar-color:
            var(--color-toggle-button-track-on,
                var(--cr-fallback-color-primary));
        --cr-toggle-checked-button-color:
            var(--color-toggle-button-thumb-on,
                var(--cr-fallback-color-on-primary));
        --cr-toggle-unchecked-bar-color:
            var(--color-toggle-button-track-off,
                var(--cr-fallback-color-surface-variant));
        --cr-toggle-unchecked-button-color:
            var(--color-toggle-button-thumb-off,
                var(--cr-fallback-color-outline));

        --cr-toggle-checked-ripple-color: var(--cr-active-background-color);
        --cr-toggle-unchecked-ripple-color: var(--cr-active-background-color);

        --cr-toggle-ripple-diameter: 20px;

        height: fit-content;
        min-width: initial;
        width: fit-content;
      }

      @media (forced-colors: active) {
        :host {
          /* TODO(crbug.com/1176612): cr-toggle heavily relies on
             background-color to convey various states (on/off,
             enabled/disabled). Until proper specs for HCM exist, turn off
             forced-colors automatic adjustments so that the cr-toggle is at
             least visible. Replace with a HCM compliant implementation once
             specs exist.*/
          forced-color-adjust: none;
        }
      }

      @media (prefers-color-scheme: dark) {
        :host {
          --cr-toggle-checked-bar-color: var(--google-blue-300);
          --cr-toggle-checked-button-color: var(--google-blue-300);
          --cr-toggle-checked-ripple-color:
              rgba(var(--google-blue-300-rgb), .4);
          --cr-toggle-unchecked-bar-color: var(--google-grey-500);
          --cr-toggle-unchecked-button-color: var(--google-grey-300);
          --cr-toggle-unchecked-ripple-color:
              rgba(var(--google-grey-300-rgb), .4);
        }
      }
      /* Keep the prefers-color-scheme and [dark] rules the same. */
      :host([dark]) {
        --cr-toggle-checked-bar-color: var(--google-blue-300);
        --cr-toggle-checked-button-color: var(--google-blue-300);
        --cr-toggle-checked-ripple-color:
            rgba(var(--google-blue-300-rgb), .4);
        --cr-toggle-unchecked-bar-color: var(--google-grey-500);
        --cr-toggle-unchecked-button-color: var(--google-grey-300);
        --cr-toggle-unchecked-ripple-color:
            rgba(var(--google-grey-300-rgb), .4);
      }

      :host([disabled]) {
        cursor: initial;
        opacity: var(--cr-disabled-opacity);
        pointer-events: none;
      }

      :host-context([chrome-refresh-2023]):host([disabled]) {
        --cr-toggle-checked-bar-color:
            var(--color-toggle-button-track-on-disabled,
                rgba(var(--cr-fallback-color-on-surface-rgb), .12));
        --cr-toggle-checked-button-color:
            var(--color-toggle-button-thumb-on-disabled, var(--cr-fallback-color-surface));
        --cr-toggle-unchecked-bar-color: transparent;
        --cr-toggle-unchecked-button-color:
            var(--color-toggle-button-thumb-off-disabled,
                rgba(var(--cr-fallback-color-on-surface-rgb),
                    var(--cr-disabled-opacity)));
        opacity: 1;
      }

      #bar {
        background-color: var(--cr-toggle-unchecked-bar-color);
        border-radius: 8px;
        height: 12px;
        left: 3px;
        position: absolute;
        top: 2px;
        transition: background-color linear 80ms;
        width: 28px;
        z-index: 0;
      }

      :host([checked]) #bar {
        background-color: var(--cr-toggle-checked-bar-color);
        opacity: var(--cr-toggle-checked-bar-opacity, 0.5);
      }

      :host-context([chrome-refresh-2023]) #bar {
        border: 1px solid var(--cr-toggle-unchecked-button-color);
        border-radius: 50px;
        box-sizing: border-box;
        display: block;
        height: 16px;
        opacity: 1;
        position: initial;
        width: 26px;
      }

      :host-context([chrome-refresh-2023]):host([checked]) #bar {
        border-color: var(--cr-toggle-checked-bar-color);
      }

      :host-context([chrome-refresh-2023]):host([disabled]) #bar {
        border-color: var(--cr-toggle-unchecked-button-color);
      }

      :host-context([chrome-refresh-2023]):host([disabled][checked]) #bar {
        border: none;
      }

      :host-context([chrome-refresh-2023]):host(:focus-visible) #bar {
        background-clip: padding-box;
        border-color: transparent;
        outline: 2px solid var(--cr-toggle-checked-bar-color);
      }

      #knob {
        background-color: var(--cr-toggle-unchecked-button-color);
        border-radius: 50%;
        box-shadow: var(--cr-toggle-box-shadow, 0 1px 3px 0 rgba(0, 0, 0, .4));
        display: block;
        height: 16px;
        position: relative;
        transition: transform linear 80ms, background-color linear 80ms;
        width: 16px;
        z-index: 1;
      }

      :host([checked]) #knob {
        background-color: var(--cr-toggle-checked-button-color);
        transform: translate3d(18px, 0, 0);
      }

      :host-context([dir=rtl]):host([checked]) #knob {
        transform: translate3d(-18px, 0, 0);
      }

      :host-context([chrome-refresh-2023]) #knob {
        --cr-toggle-knob-diameter_: 8px;

        /* Distance between knob center to the edge of the control is the same
           for both checked and unchecked. */
        --cr-toggle-knob-center-edge-distance_: 8px;

        box-shadow: none;
        height: var(--cr-toggle-knob-diameter_);
        left: var(--cr-toggle-knob-center-edge-distance_);
        position: absolute;
        top: 50%;
        transform: translate(-50%, -50%);
        transition: left linear 80ms, background-color linear 80ms,
            width linear 80ms, height linear 80ms;
        width: var(--cr-toggle-knob-diameter_);
      }

      :host-context([chrome-refresh-2023]):host(:active) #knob {
        --cr-toggle-knob-diameter_: 10px;
      }

      :host-context([chrome-refresh-2023]):host([checked]) #knob {
        --cr-toggle-knob-diameter_: 12px;
        left: calc(100% - var(--cr-toggle-knob-center-edge-distance_));
      }

      :host-context([chrome-refresh-2023]):host([checked]:active) #knob {
        --cr-toggle-knob-diameter_: 14px;
      }

      :host-context([chrome-refresh-2023]):host([checked]:active) #knob,
      :host-context([chrome-refresh-2023]):host([checked]:hover) #knob {
        --cr-toggle-checked-button-color:
            var(--color-toggle-button-thumb-on-hover-pressed,
                var(--cr-fallback-color-primary-container));
      }

      :host-context([chrome-refresh-2023]):host(:hover) #knob::before {
        background-color: var(--cr-hover-background-color);
        border-radius: 50%;
        content: '';
        height: var(--cr-toggle-ripple-diameter);
        left: calc(var(--cr-toggle-knob-diameter_) / 2);
        position: absolute;
        top: calc(var(--cr-toggle-knob-diameter_) / 2);
        transform: translate(-50%, -50%);
        width: var(--cr-toggle-ripple-diameter);
      }

      paper-ripple {
        --paper-ripple-opacity: 1;
        color: var(--cr-toggle-unchecked-ripple-color);
        height: var(--cr-toggle-ripple-diameter);
        left: 50%;
        outline: var(--cr-toggle-ripple-ring, none);
        pointer-events: none;
        position: absolute;
        top: 50%;
        transform: translate(-50%, -50%);
        transition: color linear 80ms;
        width: var(--cr-toggle-ripple-diameter);
      }

      :host([checked]) paper-ripple {
        color: var(--cr-toggle-checked-ripple-color);
      }

      :host-context([dir=rtl]) paper-ripple {
        left: auto;
        right: 50%;
        transform: translate(50%, -50%);
      }
    </style>
    <span id="bar"></span>
    <span id="knob"></span>
